<script setup lang="ts">
import { type FormInstance, type FormRules } from "element-plus";
import { ref, reactive, defineProps, onMounted } from "vue";
import { get } from "@/libs/request";
import { useDialogCase } from "@/libs/dialog";
const props = defineProps(["close", "params"]);
const ruleForm = ref({
  goodsId: undefined,
  catId: undefined,
  goodsName: undefined,
  goodsKeyword: undefined,
  goodsCover: undefined,
  goodsGallery: [],
  goodsDesc: undefined,
  goodsContent: undefined,
  unitName: undefined,
  specType: false,
  isShow: true,
  attr: [],
  spec: <any>[],
});
const rules = reactive<FormRules>({
  catId: [{ required: true, message: "请选择商品分类", trigger: "blur" }],
  goodsName: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
  goodsCover: [{ required: true, message: "需要上传商品封面图", trigger: "blur" }],
  unitName: [{ required: true, message: "请输入商品单位", trigger: "blur" }],
});
const catId = ref();
//分类列表
const goodsCategory = ref([]);
//表单提交
const ruleFormRef = ref<FormInstance>();
// 规格列表
const spec = ref([]);

/**
 * 获取商品分类
 */
const getDetail = async () => {
  const res = await get(`goods/detail/${props.params.goodsId}`);
  if (res.errCode == 0) {
    ruleForm.value = res.data;
    spec.value = res.data.spec;
  }
}
/**
 * 获取分类
 */
const getGoodsCategory = async () => {
  const res = await get("goodsCategory/getTree");
  if (res.errCode == 0) {
    goodsCategory.value = res.data;
  }
}
const submitForm = async (formEl: FormInstance | undefined) => {
  props.close();
};
// 调整库存数量
const editStoreCount = (type:"add"|"sub",specId:number)=>{
   const dialog = useDialogCase();
  dialog.show({
    width: "500px",
    path: "goods/editStoreCount",
    params: {
      type,
      specId
    },
    callback: () => {
      getDetail()
    },
  });
}
onMounted(async () => {
  await getDetail();
  await getGoodsCategory()
  catId.value = ruleForm.value.catId;
})
</script>
<template>
  <div class="page">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item @click="props.close()">商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>查看商品</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100">
        <el-form-item label="商品分类" prop="catId">
          <el-cascader :options="goodsCategory" v-model="catId" disabled :props="{
            label: 'catName',
            value: 'catId'
          }" />
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="ruleForm.goodsName" placeholder="请输入商品名称" disabled />
        </el-form-item>
        <el-form-item label="商品关键字" prop="goodsKeyword">
          <el-input v-model="ruleForm.goodsKeyword" placeholder="请输入商品关键字" disabled />
        </el-form-item>
        <el-form-item label="商品单位" prop="unitName">
          <el-input v-model="ruleForm.unitName" placeholder="请输入商品单位" disabled />
        </el-form-item>
        <el-form-item label="封面图" prop="goodsCover">
          <el-image :src="ruleForm.goodsCover" :preview-src-list="[ruleForm.goodsCover]"
            style="width: 150px;"></el-image>
        </el-form-item>
        <el-form-item label="图片画册" prop="goodsGallery">
          <el-image v-for="(item, index) in ruleForm.goodsGallery" :key="index" :src="item.url"
            :preview-src-list="ruleForm.goodsGallery.map(item => item.url)" :initial-index="index" hide-on-click-modal
            style="width: 150px;"></el-image>
        </el-form-item>
        <el-form-item label="商品简介" prop="goodsDesc">
          <el-input v-model="ruleForm.goodsDesc" :rows="3" type="textarea" placeholder="请输入商品描述" :maxlength="50"
            show-word-limit disabled />
        </el-form-item>
        <el-form-item label="详情" prop="goodsContent">
          <div v-html="ruleForm.goodsContent" v-if="ruleForm.goodsContent"></div>
          <div v-else>--</div>
        </el-form-item>
        <el-form-item label="商品规格" prop="specType">
          <el-radio-group v-model="ruleForm.specType" class="ml-4" disabled>
            <el-radio :label="false" size="large" checked>单规格</el-radio>
            <el-radio :label="true" size="large">多规格</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-table :data="spec" style="width: 100%">
            <el-table-column prop="keyName" label="规格组合" align="center" width="200" />
            <el-table-column label="规格图片" align="center">
              <template #default="scope">
                <el-image :src="scope.row.cover" :preview-src-list="[scope.row.cover]" style="width: 150px;"
                  v-if="scope.row.cover"></el-image>
                <div v-else>--</div>
              </template>
            </el-table-column>
            <el-table-column label="原价" align="center">
              <template #default="scope">
                {{ scope.row.oldPrice }}
              </template>
            </el-table-column>
            <el-table-column label="售价" align="center">
              <template #default="scope">
                {{ scope.row.price }}
              </template>
            </el-table-column>
            <el-table-column label="库存" align="center">
              <template #default="scope">
                {{ scope.row.storeCount }}
              </template>
            </el-table-column>
            <el-table-column label="条形码" align="center">
              <template #default="scope">
                {{ scope.row.barCode ? scope.row.barCode : '--' }}
              </template>
            </el-table-column>
            <el-table-column label="是否上架" align="center">
              <template #default="scope">
                {{ scope.row.status ? '已上架' : '未上架' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200" fixed="right">
              <template #default="scope">
                <el-button type="danger" @click="editStoreCount('sub', scope.row.specId)">减少库存</el-button>
                <el-button type="primary" @click="editStoreCount('add', scope.row.specId)">添加库存</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="状态" prop="isShow">
          {{ ruleForm.isShow ? '已显示' : '未显示' }}
        </el-form-item>
        <el-form-item class="active">
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            关闭
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>